import { type } from "os";
import React from "react";
// 声明state类型
type Istate={
    isCharge:boolean
}
// 限制类
type Itoggle={
    handleClick:(e:React.MouseEvent)=>void
}
class Toggle extends React.Component<any,Istate> implements Itoggle{
    constructor(props:any){
        super(props)
        this.state={
            isCharge:false
        }
    }
    componentDidMount(): void {
        console.log('组件加载了')
    }

    handleClick=(e:React.MouseEvent)=>{
        this.setState({
            isCharge:!this.state.isCharge
        })
    }

    render(): React.ReactNode {
        // 如果不想让一个组件渲染，直接 return null就行了，但是钩子函数还是会执行
        return(
            <fieldset>
                <legend>toggle</legend>
                <h1>{this.state.isCharge?'欢迎登录':'请登入'}</h1>
                <button onClick={this.handleClick}>{this.state.isCharge?'退出登录':'请登录'}</button>
            </fieldset>
        )
    }
}
export default Toggle